<template>
  <section>
    <div class="content-title">{{ title }}</div>
    <div class="knowledge-list">
      <div v-for="(x, y) in list" :key="y" @click="goPath(x)">
        {{ x.title }}
      </div>
    </div>
  </section>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const props = defineProps({
  title: {
    type: String,
    defalut: ''
  }
})
const list = [
  {
    title: '教育',
    name: 'education'
  },
  {
    title: '文化',
    name: 'collect'
  },
  {
    title: '体育',
    name: 'football'
  },
  {
    title: '娱乐',
    name: 'game'
  },
  {
    title: '资料',
    name: 'information'
  }
]

function goPath(x) {
  router.push({
    path: '/' + x.name
  })
}
</script>
<style scoped lang="scss">
.knowledge-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 10px;

  >div {
    width: calc(25% - 20px);
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    margin: 10px;
    border: 1px solid #fff;
    border-radius: 100px;
  }
}
</style>
